<!DOCTYPE html><html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"><meta name="author" content="ding-chen-xiao的个人站"><meta name="renderer" content="webkit"><meta name="copyright" content="ding-chen-xiao的个人站"><meta name="keywords" content="ding-chen-xiao的个人站"><meta name="description" content="null"><meta name="Cache-Control" content="no-cache"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>Mr.ding's Blog</title><link rel="stylesheet" href="/css/style.css?v=2018.7.9"><link rel="stylesheet" href="/css/animation.css?v=2018.7.9"><link rel="icon" href="/img/assets/favicon.ico"><link rel="stylesheet" href="https://cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css?version=1.5.6"><!-- scripts--><script>(function( w ){
  "use strict";
  <title>201808010104丁晨骁</title>
  // rel=preload support test
  if( !w.loadCSS ){
    w.loadCSS = function(){};
  }
  // define on the loadCSS obj
  var rp = loadCSS.relpreload = {};
  // rel=preload feature support test
  // runs once and returns a function for compat purposes
  rp.support = (function(){
    var ret;
    try {
      ret = w.document.createElement( "link" ).relList.supports( "preload" );
    } catch (e) {
      ret = false;
    }
    return function(){
      return ret;
    };
  })();

  // if preload isn't supported, get an asynchronous load by using a non-matching media attribute
  // then change that media back to its intended value on load
  rp.bindMediaToggle = function( link ){
    // remember existing media attr for ultimate state, or default to 'all'
    var finalMedia = link.media || "all";

    function enableStylesheet(){
      link.media = finalMedia;
    }

    // bind load handlers to enable media
    if( link.addEventListener ){
      link.addEventListener( "load", enableStylesheet );
    } else if( link.attachEvent ){
      link.attachEvent( "onload", enableStylesheet );
    }

    // Set rel and non-applicable media type to start an async request
    // note: timeout allows this to happen async to let rendering continue in IE
    setTimeout(function(){
      link.rel = "stylesheet";
      link.media = "only x";
    });
    // also enable media after 3 seconds,
    // which will catch very old browsers (android 2.x, old firefox) that don't support onload on link
    setTimeout( enableStylesheet, 3000 );
  };

  // loop through link elements in DOM
  rp.poly = function(){
    // double check this to prevent external calls from running
    if( rp.support() ){
      return;
    }
    var links = w.document.getElementsByTagName( "link" );
    for( var i = 0; i < links.length; i++ ){
      var link = links[ i ];
      // qualify links to those with rel=preload and as=style attrs
      if( link.rel === "preload" && link.getAttribute( "as" ) === "style" && !link.getAttribute( "data-loadcss" ) ){
        // prevent rerunning on link
        link.setAttribute( "data-loadcss", true );
        // bind listeners to toggle media back
        rp.bindMediaToggle( link );
      }
    }
  };

  // if unsupported, run the polyfill
  if( !rp.support() ){
    // run once at least
    rp.poly();

    // rerun poly on an interval until onload
    var run = w.setInterval( rp.poly, 500 );
    if( w.addEventListener ){
      w.addEventListener( "load", function(){
        rp.poly();
        w.clearInterval( run );
      } );
    } else if( w.attachEvent ){
      w.attachEvent( "onload", function(){
        rp.poly();
        w.clearInterval( run );
      } );
    }
  }


  // commonjs
  if( typeof exports !== "undefined" ){
    exports.loadCSS = loadCSS;
  }
  else {
    w.loadCSS = loadCSS;
  }
}( typeof global !== "undefined" ? global : this ) );</script><script src="https://cdn.jsdelivr.net/npm/jquery@3.3.1/dist/jquery.min.js" defer></script><script src="/js/main.js?v=2018.7.9" defer></script><!-- fancybox--><link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'"><script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js" defer></script><!-- busuanzi--><script async src="//dn-lbstatics.qbox.me/busuanzi/2.3/busuanzi.pure.mini.js"></script></head><body><section class="profile-close" id="cxo-profile"><div class="profile-avatar"><i class="fa fa-caret-left"></i><img src="/img/assets/cat.png"></div><!--.profile-saying
  i.fa.fa-comment
  .saying--><div class="cxo-profile-inner"><div class="profile-name">longlongyu</div><div class="profile-signature">for me</div><div class="friends"><div>FRIENDS</div><span><a href="//github.com/Longlongyu" target="_black">friendA</a></span><span><a href="//github.com/Longlongyu" target="_black">friendB</a></span><span><a href="//github.com/Longlongyu" target="_black">friendC</a></span></div><div class="read-progress"></div></div></section><header id="cxo-intro" style="height: 70vh;background-image: url(/img/intro/index-bg.png);"><nav id="cxo-intro-nav"><section><div class="intro-nav-title"><a href="/">Mr.Long's Blog</a></div><div class="intro-nav-label-box"><a href="/">Home</a><a href="/about/">About</a><a href="/archives/">Archives</a><a href="/tags/">Tags</a></div><i class="fa fa-bars intro-nav-menu"><div class="intro-nav-drop"><a href="/">Home</a><a href="/about/">About</a><a href="/archives/">Archives</a><a href="/tags/">Tags</a></div></i><div class="clear"></div></section></nav><h1>Mr.Long's Blog</h1><h5>Welcome to my Blog!</h5><div class="intro-social"><a class="fa fa-envelope" href="mailto:Longlongyuu@foxmail.com" title="email"></a><a class="fa fa-github" href="//github.com/Longlongyu" target="_blank" title="github"></a><a class="fa fa-weibo" href="//www.weibo.com" target="_blank" title="weibo"></a><a class="fa fa-facebook" href="//www.facebook.com" target="_blank" title="facebook"></a><a class="fa fa-twitter" href="//twitter.com" target="_blank" title="twitter"></a><a class="fa fa-rss" href="/atom.xml" target="_blank" title="rss"></a></div></header><article class="cxo-up" id="cxo-content-outer"><section id="cxo-content-inner"><section id="recent-posts"><div class="recent-post-item"><div class="post-title"><a class="fa fa-toggle-up stick-top" href="/2018/07/18/hexoThemeCxo/">hexo-theme-Cxo</a></div><div class="post-time"><i class="fa fa-table"></i><time datetime="2018-07-18T09:40:09.000Z">2018-07-18</time><i class="fa fa-edit"></i><time datetime="2018-07-18T09:40:09.000Z">2018-07-24</time></div><div class="recent-post-content"><p><img src="/img/demo/demo.png" alt="Cxo"></p>
<p>如果你喜欢这款主题，可以访问GITHUB地址：<a href="https://github.com/Longlongyu/hexo-theme-Cxo" title="hexo-theme-Cxo" target="_blank" rel="noopener">点这里</a></p>
<h2 id="帮助"><a href="#帮助" class="headerlink" title="帮助"></a>帮助</h2><p>遇到任何使用上的问题，都可以向我留言。</p>
<p>感谢您的使用！</p></div><div class="recent-post-tags"><a class="post-tag fa fa-tag" href="javascript:void(0)" date-tags="theme"> theme</a><a class="post-tag fa fa-tag" href="javascript:void(0)" date-tags="hexo"> hexo</a></div><div class="read-more"><a class="more" href="/2018/07/18/hexoThemeCxo/#more">ReadMore</a></div><hr></div><div class="recent-post-item"><div class="post-title"><a href="/2018/09/23/photosTest/">摘要图片测试</a></div><div class="post-time"><i class="fa fa-table"></i><time datetime="2018-09-23T01:15:14.000Z">2018-09-23</time><i class="fa fa-edit"></i><time datetime="2018-09-23T01:15:14.000Z">2018-09-23</time></div><div class="recent-post-content"><p><img src="http://pic.90sjimg.com/back_pic/qk/back_origin_pic/00/03/90/9d60d6efd18d8fa7bdb87f4a7840b787.jpg" alt="test"></p></div><div class="recent-post-tags"><a class="post-tag fa fa-tag" href="javascript:void(0)" date-tags="test"> test</a></div><div class="read-more"><a class="more" href="/2018/09/23/photosTest/#more">ReadMore</a></div><hr></div><div class="recent-post-item"><div class="post-title"><a href="/2018/07/23/DeepUnderstandingLineHeight/">对line-height的一些理解</a></div><div class="post-time"><i class="fa fa-table"></i><time datetime="2018-07-23T14:21:53.000Z">2018-07-23</time><i class="fa fa-edit"></i><time datetime="2018-07-23T14:21:53.000Z">2018-09-01</time></div><div class="recent-post-abstract"><p class="fa fa-chain">最近翻看了几篇文章，学到了不少东西，于是写了这篇文章来梳理自己对line-height的理解。</p></div><div class="recent-post-content"><p><strong><em>line-height</em></strong> 顾名思义就是 <strong>行高</strong>，是用来设置行间的距离，她确实是发挥这样着作用，但单单这样的去理解却也太过于粗浅了。</p>
<p>首先，具体先了解一下一些相关的概念。想一想在我们在刚开始学习英语课时，老师在黑板上画了四条线，这四条线是英文字母用来书写时的4根横向的平行线，而 <code>vertical-align</code> 中的 <strong>top</strong> , <strong>middle</strong> , <strong>baseline</strong> , <strong>bottom</strong> 就是基于这样的概念。</p>
<p>接下来我们看看 <strong><em>MDN</em></strong> 对 <strong><em>line-height</em></strong> 的描述，他是这样的：</p>
<blockquote>
<p>The <code>line-height</code> CSS property sets the amount of space used for<br>lines, such as in text. On block-level elements, it specifies<br>the minimum height of line boxes within the element. On non-<br>replaced inline elements, it specifies the height that is used<br>to calculate line box height.</p>
</blockquote>
<p><code>line-height</code> <strong><em>CSS</em></strong> 属性用于设置多行元素的空间量什么的，这些什么的先不考虑。在上面说明中，涉及到两个很重要的概念，<code>line boxes</code> 和 <code>inline boxes</code> 。</p></div><div class="recent-post-tags"><a class="post-tag fa fa-tag" href="javascript:void(0)" date-tags="learn"> learn</a><a class="post-tag fa fa-tag" href="javascript:void(0)" date-tags="CSS"> CSS</a><a class="post-tag fa fa-tag" href="javascript:void(0)" date-tags="line-height"> line-height</a></div><div class="read-more"><a class="more" href="/2018/07/23/DeepUnderstandingLineHeight/#more">ReadMore</a></div><hr></div><div class="recent-post-item"><div class="post-title"><a href="/2018/07/30/html5Semantic/">关于HTML5语义化</a></div><div class="post-time"><i class="fa fa-table"></i><time datetime="2018-07-30T07:18:33.000Z">2018-07-30</time><i class="fa fa-edit"></i><time datetime="2018-07-30T07:18:33.000Z">2018-08-11</time></div><div class="recent-post-abstract"><p class="fa fa-chain">HTML是W3C标准中结构化的标准语言，而语义化就是让页面的结构更加明确的，所以理解语义化至关重要。</p></div><div class="recent-post-content"><p>作为一名前端 <strong>coder</strong>，或者正励志成为一名前端 <strong>coder</strong>，我们都知道 <strong>HTML</strong>。<strong>HTML</strong> 是 <strong>W3C</strong> 标准中结构化的标准语言，然而在 <strong>HTML5</strong> 出现以前，我们一般采用 <strong>DIV+CSS</strong> 来布局我们的页面。</p>
<p><code>div</code> 是无语义化的标签，大量使用这种标签会使我们的文档结构不够明确，从引发了开发者会根据自身喜好来进行自定义标签导致的影响浏览器解析，不利于浏览器的爬虫和机器地解析等诸多问题。</p>
<p>为了解决这些问题，<strong>HTML5</strong> 中新增了很多新的语义化标签，并且定义了相关规范。</p></div><div class="recent-post-tags"><a class="post-tag fa fa-tag" href="javascript:void(0)" date-tags="learn"> learn</a><a class="post-tag fa fa-tag" href="javascript:void(0)" date-tags="html"> html</a><a class="post-tag fa fa-tag" href="javascript:void(0)" date-tags="semantic"> semantic</a></div><div class="read-more"><a class="more" href="/2018/07/30/html5Semantic/#more">ReadMore</a></div><hr></div><div class="recent-post-item"><div class="post-title"><a href="/2018/08/05/GarbageCollecation/">JavaScript的垃圾回收机制</a></div><div class="post-time"><i class="fa fa-table"></i><time datetime="2018-08-05T15:48:28.000Z">2018-08-05</time><i class="fa fa-edit"></i><time datetime="2018-08-05T15:48:28.000Z">2018-08-08</time></div><div class="recent-post-abstract"><p class="fa fa-chain">了解 JavaScript 的垃圾回收机制，来做到性能优化。</p></div><div class="recent-post-content"><p><strong>JavaScript</strong> 是一门很容易上手的语言。</p>
<p>他有着自动垃圾回收机制 <strong>(GC:Garbage Collecation)</strong> ，使我们撰写代码不用去手动去释放内存来管理和分配内存。因为这些全由 <strong>JavaScript</strong> 的 <strong>GC</strong> 来帮我们完成了，我们只需要快乐的敲打代码就好了。</p>
<p>然而， <strong>JavaScript</strong> 的 <strong>GC</strong> 虽然很便利，却也埋下了诸多隐患。例如，内存泄漏就是一个我们常常遇见的问题，让很多新手程序员对此一头雾水。而如果你了解了 <strong>JavaScript</strong> 的垃圾回收机制，你就能更好的避免和解决此类的问题，从而达到性能的优化。</p></div><div class="recent-post-tags"><a class="post-tag fa fa-tag" href="javascript:void(0)" date-tags="learn"> learn</a><a class="post-tag fa fa-tag" href="javascript:void(0)" date-tags="javascript"> javascript</a><a class="post-tag fa fa-tag" href="javascript:void(0)" date-tags="garbage collecation"> garbage collecation</a></div><div class="read-more"><a class="more" href="/2018/08/05/GarbageCollecation/#more">ReadMore</a></div><hr></div><div class="recent-post-item"><div class="post-title"><a href="/2018/06/20/HelloWorld/">Hello-Hexo!</a></div><div class="post-time"><i class="fa fa-table"></i><time datetime="2018-06-20T06:39:37.000Z">2018-06-20</time><i class="fa fa-edit"></i><time datetime="2018-06-20T06:39:37.000Z">2018-07-15</time></div><div class="recent-post-abstract"><p class="fa fa-chain">搭建了自己的博客，这应该算是一件非常酷的事！</p></div><div class="recent-post-tags"><a class="post-tag fa fa-tag" href="javascript:void(0)" date-tags="learn"> learn</a></div><div class="read-more"><a class="more" href="/2018/06/20/HelloWorld/#more">ReadMore</a></div><hr></div><div class="recent-post-item"><div class="post-title"><a href="/2018/06/28/Exercise/">使用Express来开发项目</a></div><div class="post-time"><i class="fa fa-table"></i><time datetime="2018-06-28T06:39:37.000Z">2018-06-28</time><i class="fa fa-edit"></i><time datetime="2018-06-28T06:39:37.000Z">2018-07-06</time></div><div class="recent-post-abstract"><p class="fa fa-chain">用Express脚手架以及webpack等工具来搭建项目。</p></div><div class="recent-post-content"><p><strong><em>Express</em></strong> 是一个基于 <strong><em>Node.js</em></strong> 平台的 <strong><em>web</em></strong> 应用开发框架，它提供一系列强大的特性，可以帮助开发者创建各种 <strong><em>web</em></strong> 和移动设备应用。<br>用 <strong><em>Express</em></strong> 框架开发 <strong><em>web</em></strong> 项目可以直接构建整个项目框架并且将前端页面跟后台贯穿起来。</p>
<p>是一款高度包容、快速而极简的 <strong><em>Node.js Web</em></strong> 框架。</p>
<p><img src="https://cdn-images-1.medium.com/max/701/1*EKW3XazCN98jcVrlEP3H8g.png" alt="expressjs"></p></div><div class="recent-post-tags"><a class="post-tag fa fa-tag" href="javascript:void(0)" date-tags="learn"> learn</a><a class="post-tag fa fa-tag" href="javascript:void(0)" date-tags="express"> express</a><a class="post-tag fa fa-tag" href="javascript:void(0)" date-tags="webpack"> webpack</a><a class="post-tag fa fa-tag" href="javascript:void(0)" date-tags="babel"> babel</a></div><div class="read-more"><a class="more" href="/2018/06/28/Exercise/#more">ReadMore</a></div><hr></div></section><nav class="cxo-page-nav"><span class="page-number current">1</span></nav></section></article><footer id="cxo-footer-outer"><div id="cxo-footer-inner"><p class="footer-container"><span>Site by </span><a href="http://hexo.io"><span>Hexo</span></a><span> | theme </span><a href="https://github.com/Longlongyu/hexo-theme-Cxo"><span>Cxo</span></a></p><i class="fa fa-user"> </i><span id="busuanzi_value_site_uv"></span><span> | </span><i class="fa fa-eye"> </i><span id="busuanzi_value_site_pv"></span><script>var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?" + 'a4e8b5d92c2afb6bc6f100c10f1988d3';
  var s = document.getElementsByTagName("script")[0]; 
  s.parentNode.insertBefore(hm, s);
})();</script></div></footer><!-- catelog--><!-- top--><i class="fa fa-arrow-up close" id="go-up" aria-hidden="true"></i></body></html>